<template>
  <div class="ai-container-padding">
    <el-form :model="queryForm" label-width="auto" label-position="top">
      <el-form-item label="关键内容：">
        <el-input v-model="queryForm.query" type="textarea" :rows="5" />
      </el-form-item>
      <el-form-item label="">
        <div style="width: 100%; text-align: right">
          <el-button
            type="primary"
            size="default"
            :loading="listLoading"
            @click="queryData"
          >
            开始检索
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <div class="result-box">
      <div class="title">检索结果</div>
      <ul class="list">
        <li v-for="(item, index) in list" :key="item.id" class="item">
          <span class="sort">
            {{ queryForm.size * queryForm.page - queryForm.size + index + 1 }}
          </span>
          <div class="content">
            <div class="name">{{ item.projectName }}</div>
            <!-- <div class="source">
              来源项目：复杂碳酸盐岩油气藏地质技术研究——2021年
            </div> -->
          </div>
          <div class="opera">
            <div v-if="item.score" class="progress">
              <el-progress
                type="circle"
                :percentage="
                  Math.round(item.score * 100) > 100
                    ? 100
                    : Math.round(item.score * 100)
                "
                :width="40"
                :stroke-width="3"
                :show-text="false"
              />
              <span>
                {{
                  Math.round(item.score * 100) > 100
                    ? 100
                    : Math.round(item.score * 100)
                }}%
              </span>
            </div>
            <el-divider direction="vertical" />
            <el-button
              type="primary"
              size="default"
              link
              @click="handleDetail(item.fileUrl)"
            >
              查看详情
            </el-button>
          </div>
        </li>
      </ul>
      <template v-if="list.length">
        <el-pagination
          v-model:current-page="queryForm.page"
          v-model:page-size="queryForm.size"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { getList } from '@/api/project/knowledge'

  export default defineComponent({
    name: 'ProjectKnowledgeList',
    setup() {
      const $baseMessage = inject('$baseMessage')
      const route = useRoute()

      const state = reactive({
        list: [],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          query: '',
          page: 1,
          size: 10,
        },
      })

      const handleSizeChange = (val) => {
        state.queryForm.size = val
        fetchData()
      }

      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        fetchData()
      }

      const queryData = () => {
        if (!state.queryForm.query) {
          return $baseMessage('请输入关键内容', 'error')
        }
        state.queryForm.page = 1
        fetchData()
      }

      const fetchData = async () => {
        state.listLoading = true
        getList(state.queryForm)
          .then((res) => {
            if (res.code == 0 || res.code == 200) {
              state.list = res.data.content || []
            }
          })
          .finally(() => {
            state.listLoading = false
          })
      }

      const handleDetail = (url) => {
        if (url.indexOf('?') != -1) {
          url = url.replace(/(\?|#)[^'"]*/, '')
        }
        window.open(url)
      }

      onMounted(() => {
        if (route.query.keywords) {
          state.queryForm.query = route.query.keywords
          fetchData()
        }
      })

      return {
        ...toRefs(state),
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        handleDetail,
      }
    },
  })
</script>

<style scoped lang="scss">
  .result-box {
    margin-top: 50px;

    .list {
      margin-top: 10px;
      border-top: 1px solid #edeff2;

      .item {
        display: flex;
        align-items: center;
        height: 80px;
        padding: 0 20px;
        border-bottom: 1px solid #edeff2;
        cursor: pointer;

        &:hover {
          background: rgba(24, 144, 255, 0.1);
        }

        .sort {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 28px;
          height: 28px;
          margin-right: 33px;
          background: #edeff2;
          border-radius: 2px;
          color: #606266;
        }

        .content {
          flex: 1;
          overflow: hidden;

          .name {
            line-height: 22px;
            color: #606266;
          }

          .source {
            margin-top: 5px;
            line-height: 17px;
            font-size: $base-font-size-small;
            color: #7d8398;
          }
        }

        .opera {
          display: flex;
          align-items: center;

          .progress {
            display: flex;
            align-items: center;

            > span {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
</style>
